<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :fullscreen.sync="fullscreen"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-card :bordered="false">
      <detail-list title="门店信息">
        <detail-list-item term="门店">{{ model.orgName }}/{{ model.shopName }}</detail-list-item>
        <detail-list-item term="日期">{{ model.daily }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="营业明细">
        <detail-list-item term="销售金额">{{ model.realSaleAmount }}</detail-list-item>
        <detail-list-item term="开单金额">{{ model.saleAmount }}</detail-list-item>
        <detail-list-item term="退货金额">{{ model.disAmount }}</detail-list-item>
      </detail-list>
    </a-card>
    <!-- 明细 -->
    <a-card :bordered="false" title="商品明细">
      <a-table
        :columns="groupColumns"
        :dataSource="groupDataList"
        size="middle"
        rowKey="id"
        :pagination="false"
        :scroll="{ y: 1000 }"
      >
        <a-table
          style="margin: 1px"
          slot="expandedRowRender"
          slot-scope="record"
          :columns="detailColumns"
          :dataSource="record.list"
          size="small"
          rowKey="id"
          bordered
          :pagination="false"
          :scroll="{ y: 1000 }"
        >
          <span slot="photo" slot-scope="text">
            <a-avatar
              shape="square"
              :src="text + '?x-oss-process=image/resize,w_50,h_50'"
              @click="text ? previewImgObject([text]) : () => {}"
            ></a-avatar>
          </span>
        </a-table>
      </a-table>
    </a-card>
  </j-modal>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from 'ant-design-vue/es/badge/Badge'
import { postAction } from '@/api/manage'
import { groupingData } from '@/utils/util'
const DetailListItem = DetailList.Item
import { previewImgObject } from '@/utils/util'

export default {
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
    STable,
  },
  name: 'DailySalesReportModal',
  data() {
    return {
      title: '详情',
      fullscreen: true,
      visible: false,
      previewImgObject,
      groupingData,
      model: {},
      groupDataList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      groupColumns: [
        {
          title: '价位',
          align: 'center',
          dataIndex: 'markPrice',
        },
        {
          title: '结余',
          align: 'center',
          dataIndex: 'remainCnt',
          customRender: (text, record) => {
            return record.list.reduce((total, cur) => {
              return total + parseInt(cur.remainCnt)
            }, 0)
          },
        },
        {
          title: '入库',
          align: 'center',
          dataIndex: 'checkInStockCnt',
          customRender: (text, record) => {
            return record.list.reduce((total, cur) => {
              return total + parseInt(cur.checkInStockCnt)
            }, 0)
          },
        },
        {
          title: '出库',
          align: 'center',
          dataIndex: 'checkOutStockCnt',
          customRender: (text, record) => {
            return record.list.reduce((total, cur) => {
              return total + parseInt(cur.checkOutStockCnt)
            }, 0)
          },
        },
        {
          title: '售出',
          align: 'center',
          dataIndex: 'realSaleCnt',
          customRender: (text, record) => {
            return record.list.reduce((total, cur) => {
              return total + parseInt(cur.realSaleCnt)
            }, 0)
          },
        },
      ],
      detailColumns: [
        {
          title: '商品图片',
          align: 'center',
          dataIndex: 'photo',
          scopedSlots: { customRender: 'photo' },
        },
        {
          title: 'SKU编码',
          align: 'center',
          dataIndex: 'itemSku',
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'itemShortName',
        },
        {
          title: '颜色',
          align: 'center',
          dataIndex: 'itemColor',
        },
        {
          title: '尺码',
          align: 'center',
          dataIndex: 'itemSize',
        },
        {
          title: '结余',
          align: 'center',
          dataIndex: 'remainCnt',
        },
        {
          title: '入库',
          align: 'center',
          dataIndex: 'checkInStockCnt',
        },
        {
          title: '出库',
          align: 'center',
          dataIndex: 'checkOutStockCnt',
        },
        {
          title: '售出',
          align: 'center',
          dataIndex: 'realSaleCnt',
        },
      ],
      url: {
        detail: '/report/daily/productSales',
      },
    }
  },
  created() {},
  methods: {
    clear() {
      this.model = {}
    },
    view(record) {
      this.detail(record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.clear()
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    detail(record) {
      this.model = Object.assign({}, record)
      let that = this
      let params = {
        shopId: this.model.shopId,
        beginDate: this.model.daily,
        endDate: this.model.daily,
      }
      postAction(this.url.detail, params).then((res) => {
        if (res.success) {
          let reportProductSalesVoList = res.result.reportProductSalesVoList
          let mapDataList = that.groupingData(reportProductSalesVoList, 'markPrice')
          mapDataList.sort((a, b) => {
            return a.markPrice - b.markPrice
          })
          console.log('mapDataList', mapDataList)
          this.groupDataList = mapDataList
        } else {
          that.$message.warning(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>